<template>
	<uni-header :title="props.title"></uni-header>
	<view class="from">
		<view class="item">
			<text class="label">原始密码</text>
			<input type="text" v-model="password1" placeholder="请输入" />
		</view>
		<view class="item">
			<text class="label">新密码</text>
			<input type="text" v-model="passwordN" placeholder="请输入" />
		</view>
		<view class="item">
			<text class="label">重复密码</text>
			<input type="text" v-model="passwordNt" placeholder="请输入" />
		</view>
		<view class="item">
			<text class="label">手机号</text>
			<input type="text" v-model="user.mobile" disabled placeholder="请输入" />
		</view>
		<view class="item">
			<text class="label">验证码</text>
			<input type="text" v-model="code" placeholder="请输入" />
			<text class="code" @click="getCode">{{codeText}}</text>
		</view>
	</view>
	<button class="submit">提交</button>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		userUpdate,
		sendCode
	} from '@/util/api.js'
	const props = defineProps('title')
	const codeText = ref("获取验证码")
	const user = uni.getStorageSync('user')
	const code = ref()
	const password1 = ref()
	const passwordN = ref()
	const passwordNt = ref()
	let bok = true
	let second = 60
	
	const getCode = async() => {
		if (!bok) return false;
		const result = await sendCode({phone:user.mobile})
		bok = false;
		let timer = setInterval(() => {
			second--
			codeText.value = `${second}秒后重试`
			if (second <= 0) {
				bok = true
				codeText.value = "重新获取"
				second = 60
				clearInterval(timer)
			}
		}, 1000)
	}
</script>

<style lang="scss" scoped>
	.submit {
		width: 686rpx;
		height: 92rpx;
		background: #1E53E7;
		border-radius: 16rpx;
		position: absolute;
		bottom: 68rpx;
		left: 32rpx;
		color: #fff;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 92rpx;
	}

	.from {
		width: 686rpx;
		display: block;
		margin: 0 auto;

		.item {
			width: 686rpx;
			height: 128rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #F2F4FA;

			input {
				flex: 2;
				display: block;
				height: 100%;
				// width: ;
			}

			.label {
				display: block;
				color: #181D29;
				font-size: 32rpx;
				width: 208rpx;
				display: flex;
				align-items: center;
				line-height: 48rpx;
			}

			.label::before {
				content: '*';
				color: #F53B47;
				display: block;
				font-size: 32rpx;
				line-height: 48rpx;
			}

			.code {
				display: block;
				color: #1E53E7;
				font-size: 32rpx;

			}

		}
	}
</style>